<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app"> 
		<div v-for="item in posts"> {{item.id}}{{item.title}} </div>
			<component-a  title="组件">     </component-a>
			<component-b></component-b>
		 </div>
		
	</body>
		<script src="https://unpkg.com/vue@next"></script>
		<script>
		
		const comA={
			data() {//这里不能读取到
			  return {
			    posts2: [
			      { id: 1, title: '组件里My journey with Vue'},
			      { id: 2, title: '组件里Blogging with Vue'},
			      { id: 3, title: '组件里Why Vue is so fun'}
			    ],
			    postFontSize: 1
			  }
			}
			,props:["title"]
			,template:`<H1>模板一{{title}}</H1> <slot></slot>`
		}
		const comB={
			template:`<H1>模板二</H1>`
		}
		
		const app=Vue.createApp({
			data() {
			  return {
			    posts: [
			      { id: 1, title: '全局My journey with Vue'},
			      { id: 2, title: '全局Blogging with Vue'},
			      { id: 3, title: '全局Why Vue is so fun'}
			    ],
			    postFontSize: 1
			  }
			}
			,components:{
				'component-a':comA
			   ,'component-b':comB	
			}
		})
		app.mount("#app");
		
		</script>
</html>
